<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
    padding: 0;
    margin: 0;
}

ul {
    margin: 10px auto;
    list-style: none;
    width: 750px;
}

li {
    
    width: 50px;
    height: 50px;
    border-left: 1px solid #000;
    border-top: 1px solid #000;
    box-sizing: border-box;
    float: left;
}

li:nth-child(15n) {
    border-right: 1px solid #000000;
}

li:nth-last-child(-n+15) {
    border-bottom: 1px solid #000000;
}

</style>
</head>
<body>
<ul id="container">

</ul>
<script>
var container = document.getElementById("container");
var direction = "right";    // 纪律蛇运动的方向
var food = [];
var speed = 700;

init();
// 存储蛇的身体
var lis = lis2TwoArray();  // 储存全部区域的每一部分下标
var snake = []; // 存储蛇的身体的每一部分的下标  [[],[],[]]
initSnake();    // 初始化蛇的身体
putInFood();  // 投放食物
autoMove(); // 让蛇开始自动移动

/**一些初始化的操作*/
function init(){
    for (var i = 0; i < 225; i++){
        var li = document.createElement("li");
        container.appendChild(li);
    }
    document.onkeydown = function (e){  // a 65 s 83  d 68  w 87
        changeDirection(e.keyCode);
    }
}

/**
 * 把所有的li转存入一个二维数组
 */
function lis2TwoArray(){
    var lis = [];   // 最终的二维数组
    for (var i = 0; i < 15; i++){
        var temp = []
        for (var j = 0; j < 15; j++){
            temp.push(container.children[i * 15 + j])
        }
        lis.push(temp);
    }
    return lis;
}

/**初始化蛇的身体*/
function initSnake(){
    //生成蛇头的下标
    var headIndexX = randomInt(0, 14)
    var headIndexY = randomInt(3, 11)
    snake.push([headIndexX, headIndexY])
    snake.push([headIndexX, headIndexY - 1])
    snake.push([headIndexX, headIndexY - 2])
    showSnake();
}

/**显示蛇的身体*/
function showSnake(){
    for (var temp of snake){
        var x = temp[0];
        var y = temp[1];
        lis[x][y].style.backgroundColor = "pink";
    }
}

/**移动蛇的身体*/
function move(){  // snake = [[2, 6],[2, 5][2, 4]]
    var last = snake.pop();
    lis[last[0]][last[1]].style.backgroundColor = "";

    // 蛇头的坐标
    var x = snake[0][0];
    var y = snake[0][1];
    switch (direction){
        case "right":
            snake.unshift([x, y + 1]);
            break;
        case "down":
            snake.unshift([x + 1, y]);
            break;
        case "left":
            snake.unshift([x, y - 1]);
            break;
        case "top":
            snake.unshift([x - 1, y]);
            break;

    }
    showSnake();
}

/**蛇可以自动移动*/
function autoMove(){
    setTimeout(function step(){
        move();
        if (isGameOver()){
            alert("游戏结束!")
            return;
        }  // 如果游戏结束, 就直接返回
        if (eatFood()){  // 如果吃成功了,则再次投放新的食物
            putInFood();
        }
        setTimeout(step, speed)
    }, 500)
}

/**
 * 判断游戏是否结束
 */
function isGameOver(){
    var head = snake[0];
    var x = head[0];
    var y = head[1];
    console.log(x, y);
    if (x < 0 || y < 0 || x > 14 || y > 14){
        return true;
    }else{
        return false;
    }
}

/**
 * 根据按键的键码, 来更改蛇的运动方向
 */
function changeDirection(code){
    //知道你按下了什么键
    switch (code){
        case 65:    // 左
        case 37:
            if (direction == "right") return;
            direction = "left"
            break;
        case 68:  // 右
        case 39:
            if (direction == "left") return;
            direction = "right"
            break;
        case 87:  // 上
        case 38:
            if (direction == "down") return;
            direction = "top"
            break;
        case 83:  // 下
        case 40:
            if (direction == "top") return;
            direction = "down"
            break;
    }
}

/**
 * 投放食物
 */
function putInFood(){
    var x;
    var y;
    while (true){
        x = randomInt(0, 14);
        y = randomInt(0, 14);
        for (var body of snake){
            if (body.indexOf(x) != -1 || body.indexOf(y) != -1){
                continue;
            }
        }
        break;
    }
    food[0] = x;
    food[1] = y;
    lis[x][y].style.backgroundColor = "green";
}

/**
 * 吃食物
 */
function eatFood(){
    //食物的坐标
    var x = food[0];
    var y = food[1];

    //蛇的头的坐标
    var headX = snake[0][0];
    var headY = snake[0][1];

    if (x == headX && y == headY){
        snake.push([x, y]);
        speed -= 50;
        return true;
    }else{
        return false;
    }
}

/**
 作者:李振超      2017年8月4日 15:14
 返回随机的 [from, to] 之间的整数(包括from，也包括to)
 */
function randomInt(from, to){
    return parseInt(Math.random() * (to - from + 1) + from);
}
</script>
</body>
</html>
<!--
1. 先绘制活动区域
    有很多个li组成
    

2. 绘制蛇的部分
    蛇的每一部分都是一个li
    
3. 让蛇动起来


4. 吃食物

-->